<!--
* @description:角色管理
* @fileName: RoleManagement
* @author:孟帅龙
* @date:2021-1-10
* @后台人员:孟帅龙
-->
<template>
  <div>
    <!-- 角色管理 -->
    <!-- 查询条件 -->
    <div class="jcselect">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="角色名称：">
          <el-input v-model="RoleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">查询</el-button>
          <el-button @click="loadReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="goBack">新增</el-button>
          <el-button type="danger" @click="handleBatchDelete"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表显示 -->
    <div class="jctable">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="RoleName" label="角色名称"> </el-table-column>
        <el-table-column prop="SuperiorRole" label="上级角色">
        </el-table-column>
        <el-table-column prop="Alias" label="别名"> </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.CreateTime.substr(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleUpdateCheck(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="success"
              @click="handleCheck(scope.row.RoleNumber)"
              >权限配置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="jspage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
      >
      </el-pagination>
    </div>
    <!-- 编辑模态框 -->
    <el-dialog title="编辑角色信息" :visible.sync="dialogFormVisible">
      <el-form :model="checkData">
        <el-form-item label="角色编号：" :label-width="formLabelWidth">
          <el-input
            v-model="checkData.RoleNumber"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色名称：" :label-width="formLabelWidth">
          <el-input v-model="checkData.RoleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="别名：" :label-width="formLabelWidth">
          <el-input v-model="checkData.Alias" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="上级名称:" :label-width="formLabelWidth">
          <el-select
            v-model="checkData.SuperiorRole"
            placeholder="请选择上级名称"
          >
            <el-option label="——" value="——"></el-option>
            <el-option label="大山炮" value="大山炮"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 权限配置 -->
    <el-dialog title="权限配置" :visible.sync="dialogVisible" width="30%">
      <el-tree
        :data="RoleTree"
        show-checkbox
        default-expand-all
        node-key="MenuNumber"
        ref="tree"
        highlight-current
        :props="defaultProps"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="loadAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      RoleName: "",
      pageindex: 1,
      pagesize: 3,
      totalcount: 0,
      multipleSelection: [],
      //全选非全选数组
      ids: [],
      checkData: {
        RoleNumber: "",
        RoleName: "",
        Alias: "",
        CreateTime: "",
        SuperiorRole: "",
        IsDelete: "",
      },
      //编辑模态框
      dialogFormVisible: false,
      formLabelWidth: "120px",

      //权限
      roleData: [],
      //角色菜单模态框
      dialogVisible: false,
      //树形控件的数组
      RoleTree: [],
      defaultProps: {
        children: "ChildMenus",
        label: "MenuName",
        id: "MenuNumber",
      },
      RoleNumber: "",
      MenuNumber:"",
      role: [],
      roles: [],
    };
  },
  methods: {
    //跳转添加页面
    goBack() {
      this.$router.push("/TheNewRole");
    },
    //查询显示分页
    loadData() {
      this.$axios
        .get("https://localhost:44399/api/app/role/role-page-show", {
          params: {
            //?RoleName=%E5%A4%A7&pageindex=1&pagesize=3
            RoleName: this.RoleName,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.loadData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = [];
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].Id);
      }
    },
    //重置
    loadReset() {
      this.RoleName = "";
      this.loadData();
    },
    //删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete("https://localhost:44399/api/app/role/" + row.Id + "/role")
            .then((res) => {
              if (res.data.Code > 0) {
                this.$message.success("删除成功");
                this.loadData();
              } else {
                this.$message.error("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    handleBatchDelete() {
      if (this.ids.length == 0) {
        this.$message.warning("请至少选择一条操作的数据");
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44399/api/app/role/batch-role?ids=" + this.ids
            )
            .then((res) => {
              if (res.data.Code > 0) {
                this.$message.success("批量删除成功");
                this.loadData();
              } else {
                this.$message.error("批量删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量删除",
          });
        });
    },
    //编辑
    handleEdit() {
      this.$axios
        .post(
          "https://localhost:44399/api/app/role/update-role",
          this.checkData
        )
        .then((res) => {
          if (res.data > 0) {
            this.$message.success("修改成功");
            this.dialogFormVisible = false;
            this.loadData();
          } else {
            this.$message.error("修改失败");
          }
        });
    },
    //详情
    handleUpdateCheck(row) {
      this.dialogFormVisible = true;
      this.checkData = row;
    },
    //权限配置详情
    handleCheck(id) {
      this.dialogVisible = true;
      this.RoleNumber=id;
      this.$axios.get(`https://localhost:44399/api/app/r-mRelation/by-rMRelation-id/${id}`).then((res) => {
        this.$refs.tree.setCheckedKeys([]);
        res.data.forEach(item=>{
          var node=this.$refs.tree.getNode(item.MenuId);
          if(node.isLeaf){
            this.$refs.tree.setChecked(node,true);
          }
        })
      });
    },
    //权限配置添加
    loadAdd() {
      this.dialogVisible=false;
      this.role=this.$refs.tree.getCheckedKeys();
      this.roles=this.$refs.tree.getHalfCheckedKeys();
      this.$axios.post(`https://localhost:44399/api/app/r-mRelation/add-rMRelation?RoleId=${this.RoleNumber}&MenuId=${this.role.concat(this.roles)}`).then(res=>{
        if(res.data.Data>0){
          this.$message.success('权限分配成功');
        }else{
          this.$message.error('权限分配失败');
        }
      })
    },
    //菜单显示
    loadMenu() {
      this.$axios
        .get("https://localhost:44399/api/app/menu/menus")
        .then((res) => {
          this.RoleTree = res.data;
        });
    },
  },
  created() {
    this.loadData();
    this.loadMenu();
  },
};
</script>

<style>
.jsselect {
  margin: 10px;
}
.jstable {
  margin: 10px;
}
.jspage {
  margin: 10px;
}
</style>